<script lang="ts" setup>
import type { TableColumn } from "@/types/table";
import DetailDesc from "./modules/DetailDesc.vue";
import { BaseForm } from "../EpForm";

defineOptions({ name: "EpModal", inheritAttrs: false });

const baseFormRef = ref<InstanceType<typeof BaseForm>>();

const props = withDefaults(
  defineProps<{
    modalType?: Custom.OperationType;
    columns: TableColumn[];
    title: string;
    width: string | number;
  }>(),
  {
    modalType: "add",
  }
);

const dialogVisisble = ref(false);
const loading = ref(false);
const rowData = ref<Record<string, unknown> | undefined>();

const emit = defineEmits<{
  close: [];
}>();

onMounted(() => {
  console.log("ep-modal onmounted props.columns: ", props.modalType, props.columns);
});

watch(
  () => props.columns,
  (_newVal) => {
    // console.log("watch", newVal);
  }
);

const show = async (row: Record<string, unknown> | undefined) => {
  rowData.value = row;
  dialogVisisble.value = true;
  await nextTick();
  if ("edit" === props.modalType) baseFormRef.value?.fillField(row!);
};

function showLoading() {
  loading.value = true;
}

function hideLoading() {
  loading.value = false;
}

const onClose = () => {
  emit("close");
};

defineExpose({ show, showLoading, hideLoading });
</script>
<template>
  <el-dialog
    v-model="dialogVisisble"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    @close="onClose"
  >
    <div v-loading="loading" class="px-8 pt-2">
      <DetailDesc
        v-if="'detail' === modalType"
        v-bind="$attrs"
        :row-data="rowData!"
        :columns="columns"
      ></DetailDesc>
      <base-form
        v-else
        ref="baseFormRef"
        v-bind="$attrs"
        :columns="columns"
        @cancel="dialogVisisble = false"
      ></base-form>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
